<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_small'"
      :append-to-body="true"
      :title="`${btn.Edit}/${btn.BulkEdit}`"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
    >
      <div>
        <table>
          <tr>
            <td style="width: 40px">
              <el-checkbox v-model="checked[0]"></el-checkbox>
            </td>
            <td>
              <span>{{ dataList.MaintenanceTask }}</span>
            </td>
            <td>
              <el-input v-model="form.project" type="textarea"></el-input>
            </td>
          </tr>
          <tr>
            <td style="width: 40px">
              <el-checkbox v-model="checked[1]"></el-checkbox>
            </td>
            <td>
              <span>{{ dataList.ScheduledMaintenanceTime }}</span>
            </td>
            <td>
              <el-date-picker
                v-model="form.planDate"
                type="date"
                :placeholder="dataList.SelectDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </td>
          </tr>
          <tr>
            <td style="width: 40px">
              <el-checkbox v-model="checked[2]"></el-checkbox>
            </td>
            <td>
              <span>{{ dataList.Week }}</span>
            </td>
            <td>
              <el-row>
                <el-col :span="12">
                  <el-input
                    v-model="form.cycle"
                    oninput="value=value.replace(/[^\d]/g,'')"
                  ></el-input>
                </el-col>
                <el-col :span="12">
                  <el-select
                    ref="options"
                    v-model="form.unit"
                    :placeholder="dataList.Placeholder"
                    @change="unitChange"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </td>
          </tr>
          <tr>
            <td style="width: 40px">
              <el-checkbox v-model="checked[3]"></el-checkbox>
            </td>
            <td>
              <span>{{ dataList.MaintenancePersonnel }}</span>
            </td>
            <td>
              <UserDropDownList
                :value="form.maintenancePersonId"
                :return-objct.sync="returnObjct"
                @input="borrowPersonChange($event)"
              />
            </td>
          </tr>
        </table>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="onSubmit('formData')">{{
          btn.Confirm
        }}</el-button>
        <el-button @click="cancel">{{ btn.Cancel }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { periodUnit } from "../../../utils/const";
import UserDropDownList from "../../../components/UserDropDownList.vue";
export default {
  name: "DeviceMaintenanceProjectEditDialog",
  components: { UserDropDownList },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      form: {
        project: "",
        planDate: null,
        cycle: 0,
        unit: 1,
        unitName: "年",
        maintenancePersonId: null,
        maintenancePersonName: "",
      },
      checked: [],
      returnObjct: true,
      loading: false,
      innerDialogFormVisible: false,
      formLabelWidth: "100px",
      choiceDeviceVisible: false,
      options: periodUnit,
      pickerOptions: {
        // 限制日期
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {
    dialogFormVisible(val) {
      this.innerDialogFormVisible = val;
    },
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  created() {
    this.form = JSON.parse(JSON.stringify(this.row));
    this.innerDialogFormVisible = this.dialogFormVisible;
  },
  methods: {
    borrowPersonChange(val) {
      this.form.maintenancePersonId = val.value;
      this.form.maintenancePersonName = val.label;
    },
    // 周期单位
    unitChange() {
      this.form.unitName = this.options.find(
        (item) => item.value === this.form.unit
      ).label;
    },
    cancel() {
      this.innerDialogFormVisible = false;
    },
    closeDialog() {
      this.$parent.getList();
      this.cancel();
    },
    onSubmit() {
      var data = {
        project: "",
        planDate: null,
        cycle: 0,
        unit: 1,
        unitName: this.$i18n.locale === "en" ? "Year" : "年",
        maintenancePersonId: null,
        maintenancePersonName: "",
      };
      if (this.checked[0]) {
        if (!this.form.project) {
          this.$message.warning(
            this.$i18n.t("ModuleDevice.Message.MaintenanceCantEmpty")
          );
          return false;
        }
        data.project = this.form.project;
      }
      if (this.checked[1]) {
        if (!this.form.planDate) {
          this.$message.warning(
            this.$i18n.t("ModuleDevice.Message.ScheduledMainCantEmpty")
          );
          return false;
        }
        data.planDate = this.form.planDate;
      }
      if (this.checked[2]) {
        if (!this.form.cycle || !this.form.unit) {
          this.$message.warning(
            this.$i18n.t("ModuleDevice.Message.IntervalCannotEmpty")
          );
          return false;
        }
        data.cycle = this.form.cycle;
        data.unit = this.form.unit;
        data.unitName = this.form.unitName;
      }
      if (this.checked[3]) {
        if (!this.form.maintenancePersonId) {
          this.$message.warning(
            this.$i18n.t("ModuleDevice.Message.MaintenancePersonnelCantEmpty")
          );
          return false;
        }
        data.maintenancePersonId = this.form.maintenancePersonId;
        data.maintenancePersonName = this.form.maintenancePersonName;
      }
      data.checked = this.checked;
      this.$emit("closeDeviceMaintenanceProjectEdit", data);
      this.cancel();
    },
  },
};
</script>

<style scoped>
table {
  border-collapse: collapse; /* 合并边框，使其一致 */
  width: 100%;
}

table,
th,
td {
  border: 1px solid gainsboro; /* 设置边框的样式 */
  padding: 8px; /* 可选：设置单元格的内边距 */
}
td {
  text-align: center; /* 水平居中对齐 */
  vertical-align: middle; /* 垂直居中对齐 */
}
td:nth-child(-n + 2) {
  background-color: ghostwhite; /* 设置浅灰色背景 */
}
</style>
